<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${systemName}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=311"/>
    <style>
        .layui-fluid{
            padding: 0px;
            background-image: url("${ctxPath}/assets/common/images/chart_bg1.jpg");
            /*background-position: center;*/
            background-repeat: no-repeat;
            background-size: 100% 100%;
            /*background: #040e2e;*/
        }
        .title{
            width: 808px;
            height: 47px;
            /*background-image: url("${ctxPath}/assets/common/images/title.png");*/
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            margin: 0 auto;
            color: white;
            font-size: 26px;
            line-height: 47px;
            font-weight: bold;
            text-align: center;
            letter-spacing:8px;
        }

        .rank_title{
            color: white;
            text-align: center;
            margin-top: 10px;
            font-size: 20px;
        }
        #city_rank{
            width: 100%;
            height: 500px;
        }
        #county_rank{
            width: 100%;
            height: 550px;
        }

        #completion{
            width: 90%;
            height: 500px;
            margin: 0 auto;
            margin: 0 20px;
            border-top: 2px solid #1d909e;
        }
        #map{
            width: 100%;
            height:450px;
        }
        #city_completion{
            width: 100%;
            height: 500px;
        }
        #county_completion{
            width: 100%;
            height: 550px;
        }

    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="rubik-loader"></div>
</div>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs3">
            <select name="year" id="year">
                @for(item in yearList){
                    @if(item==nowYear){
                    <option selected value="${item}">${item}年</option>
                    @}else{
                    <option value="${item}">${item}年</option>
                    @}

                @}
            </select>

            <select name="quarter" id="quarter">

            </select>
        </div>
        <div class="layui-col-xs6">
            <div class="title">民兵工作过程管控</div>
        </div>
        <div class="layui-col-xs3">

        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="rank_title">地市得分排名</div>
            <div id="city_rank"></div>
            <div class="rank_title">区县得分排名前20</div>
            <div id="county_rank"></div>
        </div>
        <div class="layui-col-xs6">
            <div  id="map"></div>
            <div  id="completion"></div>
        </div>
        <div class="layui-col-xs3">
            <div class="rank_title">市完成率排行榜</div>
            <div id="city_completion"></div>
            <div class="rank_title">区县完成率后20</div>
            <div id="county_completion"></div>
        </div>
    </div>
</div>
<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "",
        addCtx: function (ctx) {
            if (this.ctxPath === "") {
                this.ctxPath = ctx;
            }
        }
    };
    Feng.addCtx("${ctxPath}");
</script>

<script type="text/javascript" src="${ctxPath}/assets/common/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=311"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts-liquidfill.min.js"></script>


<script>
    layui.use(['layer', 'element','ax','form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var $ax = layui.ax;
        var form = layui.form;

        var condition = {
            year:"",
            quarter:""
        }

        var qAjax = new $ax(Feng.ctxPath + "/chart/quarterList", function (data) {
            $("#quarter").empty();
            $("#quarter").append(data)
        })
        qAjax.start();
        form.render('select');

        $("#year").change(function () {
            $("#quarter").val("")
            condition.year = $("#year").val();
            refresh();
        })
        $("#quarter").change(function () {
            condition.quarter = $("#quarter").val()
            refresh();
        })

        refresh();

        function refresh() {
            var ajax = new $ax(Feng.ctxPath + "/chart/countyCompletionData", function (data) {
                barCountyCompletion(data);
            })
            ajax.set("year",condition.year);
            ajax.set("quarter",condition.quarter);
            ajax.start();

            var ajax1 = new $ax(Feng.ctxPath + "/chart/cityCompletionData", function (data) {
                barCityCompletion(data);
            })
            ajax1.set("year",condition.year);
            ajax1.set("quarter",condition.quarter);
            ajax1.start();

            var ajax2 = new $ax(Feng.ctxPath + "/chart/mapCityList", function (data) {
                mapShow(data);
            })
            ajax2.set("year",condition.year);
            ajax2.set("quarter",condition.quarter);
            ajax2.start();

            var ajax3 = new $ax(Feng.ctxPath + "/chart/countyRankData", function (data) {
                barCountyRank(data);
            })
            ajax3.set("year",condition.year);
            ajax3.set("quarter",condition.quarter);
            ajax3.start();

            var ajax4 = new $ax(Feng.ctxPath + "/chart/cityRankData", function (data) {
                barCityRank(data);
            })
            ajax4.set("year",condition.year);
            ajax4.set("quarter",condition.quarter);
            ajax4.start();

            var ajax5 = new $ax(Feng.ctxPath + "/chart/completionData", function (data) {
                barCompletion(data);
            })
            ajax5.set("year",condition.year);
            ajax5.set("quarter",condition.quarter);
            ajax5.start();
        }

        //区县完成率排名
        function barCountyCompletion(data) {
            var countyCompletion = echarts.init(document.getElementById("county_completion"),myEchartsTheme);
            var dataArr = data;

            var dataAxis = dataArr.map(obj => obj.name);
            var TData = dataArr.map(item => Number(item.value));
            var max = Math.max(...TData);
            var maxArr = new Array(TData.length).fill(max);

            var option = {
                backgroundColor: 'transparent',
                title: {
                    text: '',
                    textStyle: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 20,
                    },
                    top: '3%',
                    left: 'center'
                },
                grid: {
                    left: '5%',
                    right: '10%',
                    top: '2%',
                    bottom: 25,
                    containLabel: true
                },
                xAxis: {
                    show: false,
                    xAxisIndex: 1,
                    splitNumber: 3,
                    type: "value",
                    nameGap: 30,
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                            fontSize: 16
                        }
                    },
                    min: function(value) {
                        return value.min > 2 ? value.min - 2 : value.min;
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(58,78,105,.8)"
                        }
                    }
                },
                yAxis: {
                    type: "category",
                    data: dataAxis,
                    axisTick: {
                        show: false
                    },
                    inverse: true,
                    z: 10,
                    axisLabel: {
                        show: true,
                        color: "#fff",
                        fontSize: dataAxis.length > 10 ? 18 : 22,
                        interval: 0,
                        formatter: function(value) {
                            var idx = dataAxis.indexOf(value);
                            return (
                                "{label|" +
                                value +
                                "}" +
                                "{sort" +
                                (idx < 3 ? idx : "Default") +
                                "|" +
                                (idx + 1) +
                                "}"
                            );
                        },
                        rich: {
                            label: {
                                color: "#fff",
                                fontSize: dataAxis.length > 10 ? 18 : 22,
                                padding: [0, 10, 2, 0],
                                fontWeigth: "normal"
                            },
                            sort0: {
                                color: "#fff",
                                fontSize: 16,
                                width: 20,
                                height: 20,
                                textShadowColor: "rgba(0,0,0,.4)",
                                textShadowBlur: 2,
                                textShadowOffsetX: -1,
                                textShadowOffsetY: 1,
                                shadowColor: "rgba(255,102,31,.26)",
                                verticalAlign: "middle",
                                shadowBlur: 8,
                                shadowOffsetY: 4,
                                fontStyle: "italic",
                                align: "center",
                                backgroundColor: "#ff562e"
                            },
                            sort1: {
                                color: "#fff",
                                fontSize: 16,
                                width: 20,
                                height: 20,
                                textShadowColor: "rgba(0,0,0,.4)",
                                fontStyle: "italic",
                                textShadowBlur: 2,
                                textShadowOffsetX: -1,
                                textShadowOffsetY: 1,
                                shadowColor: "rgba(255,171,41,.26)",
                                verticalAlign: "middle",
                                shadowBlur: 8,
                                shadowOffsetY: 4,
                                align: "center",
                                backgroundColor: "#ff900e"
                            },
                            sort2: {
                                color: "#fff",
                                fontSize: 16,
                                width: 20,
                                height: 20,
                                fontStyle: "italic",
                                textShadowColor: "rgba(0,0,0,.4)",
                                textShadowBlur: 2,
                                textShadowOffsetX: -1,
                                textShadowOffsetY: 1,
                                shadowColor: "rgba(11,175,237,.26)",
                                verticalAlign: "middle",
                                shadowBlur: 8,
                                shadowOffsetY: 4,
                                align: "center",
                                backgroundColor: "#0599de"
                            },
                            sortDefault: {
                                color: "#fff",
                                fontSize: 16,
                                width: 17,
                                padding: [0, 3, 0, 0],
                                height: 20,
                                fontStyle: "italic",
                                textShadowColor: "rgba(0,0,0,.4)",
                                textShadowBlur: 2,
                                textShadowOffsetX: -1,
                                textShadowOffsetY: 1,
                                shadowColor: "rgba(15,191,129,.26)",
                                verticalAlign: "middle",
                                shadowBlur: 8,
                                shadowOffsetY: 4,
                                align: "center",
                                backgroundColor: "#0bbe63"
                            }
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#e4e4e4"
                        }
                    }
                },
                color: ["#ff562e", "#ff900e", "#0599de", "#0bbe63"],
                series: [
                    {
                        type: "bar",
                        barGap: "-100%",
                        barWidth: 6,
                        z: 0,
                        label: {
                            normal: {
                                show: true,
                                position: "right",
                                formatter: function(params) {
                                    var idy = params.dataIndex > 3 ? 3 : params.dataIndex;
                                    return (
                                        "{color" + idy + "|" + TData[params.dataIndex] +
                                        "}{u" + idy + "|" + "%}"
                                    );
                                },
                                rich: {
                                    color0: {
                                        color: "#ff562e",
                                        fontSize: 24,
                                        verticalAlign: "bottom"
                                    },
                                    color1: {
                                        color: "#ff900e",
                                        fontSize: 24,
                                        verticalAlign: "bottom"
                                    },
                                    color2: {
                                        color: "#0599de",
                                        fontSize: 24,
                                        verticalAlign: "bottom"
                                    },
                                    color3: {
                                        color: "#0bbe63",
                                        fontSize: 24,
                                        verticalAlign: "bottom"
                                    },
                                    u0: {
                                        fontSize: 14,
                                        color: "#ff562e",
                                        padding: 2,
                                        verticalAlign: "bottom"
                                    },
                                    u1: {
                                        color: "#ff900e",
                                        fontSize: 14,
                                        padding: 2,
                                        verticalAlign: "bottom"
                                    },
                                    u2: {
                                        color: "#0599de",
                                        fontSize: 14,
                                        padding: 2,
                                        verticalAlign: "bottom"
                                    },
                                    u3: {
                                        color: "#0bbe63",
                                        fontSize: 14,
                                        padding: 2,
                                        verticalAlign: "bottom"
                                    }
                                }
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,
                                color: "#e1e7eb"
                            }
                        },
                        data: maxArr
                    },
                    {
                        type: "bar",
                        barGap: "-100%",
                        barWidth: 6,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        z: 8,
                        itemStyle: {
                            barBorderRadius: 5,
                            shadowColor: "rgba(0, 0, 0, 0.1)",
                            shadowBlur: 8,
                            shadowOffsetY: 8,
                            color: params => {
                            // build a color map as your need.
                            //定义一个颜色集合
                            var colorList = ["#ff7a0e", "#ffcb48", "#12c9fe", "#13c1a3"];
            var colorList2 = ["#ff562e", "#ff900e", "#0599de", "#0bbe63"];
            //对每个bar显示一种颜色
            var idx = params.dataIndex < 3 ? params.dataIndex : 3;
            var colorS = colorList[idx];
            var colorS2 = colorList2[idx];
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: colorS },
                { offset: 1, color: colorS2 }
            ]);
        },
            emphasis: {
                barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 1, color: "#00ff90" },
                    { offset: 0, color: "#0084f3" }
                ])
            }
        },
            data: TData
        }
        ]
        };

            countyCompletion.setOption(option)
        }

        //市完成率排名
        function barCityCompletion(data) {
            var cityCompletion = echarts.init(document.getElementById("city_completion"),myEchartsTheme);
            var dataArr = data;

            var dataAxis = dataArr.map(obj => obj.name);
            var TData = dataArr.map(item => Number(item.value));
            var max = Math.max(...TData);
            var maxArr = new Array(TData.length).fill(max);

            var option = {
                backgroundColor: 'transparent',
                title: {
                    text: '',
                    textStyle: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 20,
                    },
                    top: '3%',
                    left: 'center'
                },
                grid: {
                    left: '5%',
                    right: '10%',
                    top: '2%',
                    bottom: 25,
                    containLabel: true
                },
                xAxis: {
                    show: false,
                    xAxisIndex: 1,
                    splitNumber: 3,
                    type: "value",
                    nameGap: 30,
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                            fontSize: 16
                        }
                    },
                    min: function(value) {
                        return value.min > 2 ? value.min - 2 : value.min;
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(58,78,105,.8)"
                        }
                    }
                },
                yAxis: {
                    type: "category",
                    data: dataAxis,
                    axisTick: {
                        show: false
                    },
                    inverse: true,
                    z: 10,
                    axisLabel: {
                        show: true,
                        color: "#fff",
                        fontSize: dataAxis.length > 10 ? 18 : 22,
                        interval: 0,
                        formatter: function(value) {
                            var idx = dataAxis.indexOf(value);
                            return (
                                "{label|" +
                                value +
                                "}" +
                                "{sort" +
                                (idx < 3 ? idx : "Default") +
                                "|" +
                                (idx + 1) +
                                "}"
                            );
                        },
                        rich: {
                            label: {
                                color: "#fff",
                                fontSize: dataAxis.length > 10 ? 18 : 22,
                                padding: [0, 10, 2, 0],
                                fontWeigth: "normal"
                            },
                            sort0: {
                                color: "#fff",
                                fontSize: 16,
                                width: 20,
                                height: 20,
                                textShadowColor: "rgba(0,0,0,.4)",
                                textShadowBlur: 2,
                                textShadowOffsetX: -1,
                                textShadowOffsetY: 1,
                                shadowColor: "rgba(255,102,31,.26)",
                                verticalAlign: "middle",
                                shadowBlur: 8,
                                shadowOffsetY: 4,
                                fontStyle: "italic",
                                align: "center",
                                backgroundColor: "#ff562e"
                            },
                            sort1: {
                                color: "#fff",
                                fontSize: 16,
                                width: 20,
                                height: 20,
                                textShadowColor: "rgba(0,0,0,.4)",
                                fontStyle: "italic",
                                textShadowBlur: 2,
                                textShadowOffsetX: -1,
                                textShadowOffsetY: 1,
                                shadowColor: "rgba(255,171,41,.26)",
                                verticalAlign: "middle",
                                shadowBlur: 8,
                                shadowOffsetY: 4,
                                align: "center",
                                backgroundColor: "#ff900e"
                            },
                            sort2: {
                                color: "#fff",
                                fontSize: 16,
                                width: 20,
                                height: 20,
                                fontStyle: "italic",
                                textShadowColor: "rgba(0,0,0,.4)",
                                textShadowBlur: 2,
                                textShadowOffsetX: -1,
                                textShadowOffsetY: 1,
                                shadowColor: "rgba(11,175,237,.26)",
                                verticalAlign: "middle",
                                shadowBlur: 8,
                                shadowOffsetY: 4,
                                align: "center",
                                backgroundColor: "#0599de"
                            },
                            sortDefault: {
                                color: "#fff",
                                fontSize: 16,
                                width: 17,
                                padding: [0, 3, 0, 0],
                                height: 20,
                                fontStyle: "italic",
                                textShadowColor: "rgba(0,0,0,.4)",
                                textShadowBlur: 2,
                                textShadowOffsetX: -1,
                                textShadowOffsetY: 1,
                                shadowColor: "rgba(15,191,129,.26)",
                                verticalAlign: "middle",
                                shadowBlur: 8,
                                shadowOffsetY: 4,
                                align: "center",
                                backgroundColor: "#0bbe63"
                            }
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#e4e4e4"
                        }
                    }
                },
                color: ["#ff562e", "#ff900e", "#0599de", "#0bbe63"],
                series: [
                    {
                        type: "bar",
                        barGap: "-100%",
                        barWidth: 6,
                        z: 0,
                        label: {
                            normal: {
                                show: true,
                                position: "right",
                                formatter: function(params) {
                                    var idy = params.dataIndex > 3 ? 3 : params.dataIndex;
                                    return (
                                        "{color" + idy + "|" + TData[params.dataIndex] +
                                        "}{u" + idy + "|" + "%}"
                                    );
                                },
                                rich: {
                                    color0: {
                                        color: "#ff562e",
                                        fontSize: 24,
                                        verticalAlign: "bottom"
                                    },
                                    color1: {
                                        color: "#ff900e",
                                        fontSize: 24,
                                        verticalAlign: "bottom"
                                    },
                                    color2: {
                                        color: "#0599de",
                                        fontSize: 24,
                                        verticalAlign: "bottom"
                                    },
                                    color3: {
                                        color: "#0bbe63",
                                        fontSize: 24,
                                        verticalAlign: "bottom"
                                    },
                                    u0: {
                                        fontSize: 14,
                                        color: "#ff562e",
                                        padding: 2,
                                        verticalAlign: "bottom"
                                    },
                                    u1: {
                                        color: "#ff900e",
                                        fontSize: 14,
                                        padding: 2,
                                        verticalAlign: "bottom"
                                    },
                                    u2: {
                                        color: "#0599de",
                                        fontSize: 14,
                                        padding: 2,
                                        verticalAlign: "bottom"
                                    },
                                    u3: {
                                        color: "#0bbe63",
                                        fontSize: 14,
                                        padding: 2,
                                        verticalAlign: "bottom"
                                    }
                                }
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,
                                color: "#e1e7eb"
                            }
                        },
                        data: maxArr
                    },
                    {
                        type: "bar",
                        barGap: "-100%",
                        barWidth: 6,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        z: 8,
                        itemStyle: {
                            barBorderRadius: 5,
                            shadowColor: "rgba(0, 0, 0, 0.1)",
                            shadowBlur: 8,
                            shadowOffsetY: 8,
                            color: params => {
                            // build a color map as your need.
                            //定义一个颜色集合
                            var colorList = ["#ff7a0e", "#ffcb48", "#12c9fe", "#13c1a3"];
            var colorList2 = ["#ff562e", "#ff900e", "#0599de", "#0bbe63"];
            //对每个bar显示一种颜色
            var idx = params.dataIndex < 3 ? params.dataIndex : 3;
            var colorS = colorList[idx];
            var colorS2 = colorList2[idx];
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: colorS },
                { offset: 1, color: colorS2 }
            ]);
        },
            emphasis: {
                barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 1, color: "#00ff90" },
                    { offset: 0, color: "#0084f3" }
                ])
            }
        },
            data: TData
        }
        ]
        };
            cityCompletion.setOption(option);
        }

        //地图
        function mapShow(data) {
            var map = echarts.init(document.getElementById('map'),myEchartsTheme);
            var uploadedDataURL = "${ctxPath}/assets/common/json/shandong.json";

            var binzhou = "${ctxPath}/assets/common/json/binzhou.json";

            var dezhou = "${ctxPath}/assets/common/json/dezhou.json";

            var dongying = "${ctxPath}/assets/common/json/dongying.json";

            var heze = "${ctxPath}/assets/common/json/heze.json";

            var jinan = "${ctxPath}/assets/common/json/jinan.json";

            var jining = "${ctxPath}/assets/common/json/jining.json";

            var liaocheng = "${ctxPath}/assets/common/json/liaocheng.json";

            var linyi = "${ctxPath}/assets/common/json/linyi.json";

            var qingdao = "${ctxPath}/assets/common/json/qingdao.json";

            var rizhao = "${ctxPath}/assets/common/json/rizhao.json";

            var taian = "${ctxPath}/assets/common/json/taian.json";

            var weihai = "${ctxPath}/assets/common/json/weihai.json";

            var yantai = "${ctxPath}/assets/common/json/yantai.json";

            var weifang = "${ctxPath}/assets/common/json/weifang.json";

            var zaozhuang = "${ctxPath}/assets/common/json/zaozhuang.json";

            var zibo = "${ctxPath}/assets/common/json/zibo.json";

            $.get(uploadedDataURL, function(geoJson) {

                map.hideLoading();

                echarts.registerMap('山东', geoJson);

                var cityMap = {
                    '济南市': jinan,
                    '菏泽市': heze,
                    '德州市': dezhou,
                    '聊城市': liaocheng,
                    '泰安市': taian,
                    '临沂市': linyi,
                    '淄博市': zibo,
                    '枣庄市': zaozhuang,
                    '滨州市': binzhou,
                    '潍坊市': weifang,
                    '东营市': dongying,
                    '青岛市': qingdao,
                    '烟台市': yantai,
                    '威海市': weihai,
                    '日照市': rizhao,
                    '济宁市': jining
                };

                var gdGeoCoordMap = {
                    '济南市': [117.121225, 36.66466],
                    '菏泽市': [115.480656, 35.23375],
                    '德州市': [116.39, 37.45],
                    '聊城市': [115.97, 36.45],
                    '泰安市': [117.13, 36.18],
                    '临沂市': [118.35, 35.05],
                    '淄博市': [118.05, 36.78],
                    '枣庄市': [117.57, 34.86],
                    '滨州市': [118.03, 37.36],
                    '潍坊市': [119.1, 36.62],
                    '东营市': [118.49, 37.46],
                    '青岛市': [120.3, 36.62],
                    '烟台市': [120.9, 37.32],
                    '威海市': [122.1, 37.2],
                    '日照市': [119.1, 35.62],
                    '济宁市': [116.7, 35.42],
                };
                var gdDatas = [
                    [{
                        name: '济南市',
                        value: 10
                    }],
                    [{
                        name: '菏泽市',
                        value: 0
                    }],
                    [{
                        name: '德州市',
                        value: 0
                    }],
                    [{
                        name: '聊城市',
                        value: 0
                    }],
                    [{
                        name: '泰安市',
                        value: 1.3
                    }],
                    [{
                        name: '临沂市',
                        value: 0.2
                    }],
                    [{
                        name: '淄博市',
                        value: 0.4
                    }],
                    [{
                        name: '枣庄市',
                        value: 0.6
                    }],
                    [{
                        name: '滨州市',
                        value: 0.8
                    }],
                    [{
                        name: '潍坊市',
                        value: 0.4
                    }],
                    [{
                        name: '东营市',
                        value: 0.8
                    }],
                    [{
                        name: '青岛市',
                        value: 0.2
                    }],
                    [{
                        name: '烟台市',
                        value: 1.3
                    }],
                    [{
                        name: '威海市',
                        value: 0
                    }],
                    [{
                        name: '日照市',
                        value: 0
                    }],
                    [{
                        name: '济宁市',
                        value: 0
                    }]
                ];
                console.log(data)
                gdDatas = data;

                var dongguandata = [{
                    name: "中国铁路济南局集团有限公司济南段",
                    value: [116.98, 36.67, 0.5],
                }]

                var foshandata = [{
                    name: "菏泽万福所",
                    value: [115.38, 35.28, 0.5],
                }]

                var guangzhoudata = [{
                        name: "德州袁桥所",
                        value: [116.40, 37.44, 0.5],
                    },
                    {
                        name: "长官所",
                        value: [116.92, 37.79, 1],
                    },
                    {
                        name: "德州赵虎所",
                        value: [116.49, 37.51, 1],
                    },
                    {
                        name: "尚堂所",
                        value: [117.41, 37.71, 0.1],
                    },
                    {
                        name: "尹屯所",
                        value: [116.57, 37.13, 0.4],
                    }
                ]

                var zhongshandata = [{
                    name: "聊城沙镇所",
                    value: [115.80, 36.34, 0.5],
                }]

                var zhuhaidata = [{
                    name: "泰安徂徕所",
                    value: [117.28, 36.11, 0.5],
                },
                    {
                        name: "泰安道朗所",
                        value: [116.92, 36.21, 1],
                    },
                    {
                        name: "泰安崅峪所",
                        value: [117.42, 36.18, 1],
                    }
                ]

                var jiangmendata = [{
                    name: "山东省临沂市蒙阴县野店所",
                    value: [118.10, 35.88, 0.5],
                },
                    {
                        name: "山东省临沂市蒙阴县岱崮所",
                        value: [118.17, 35.95, 1],
                    },
                    {
                        name: "山东省临沂市兰山区城西所",
                        value: [118.31, 35.10, 1],
                    }
                ]

                var yangjiangdata = [{
                    name: "金岭所",
                    value: [118.23, 36.80, 0.5],
                },
                    {
                        name: "唐坊所",
                        value: [118.00, 37.19, 1],
                    },
                    {
                        name: "博山源泉所",
                        value: [118.05, 36.43, 1],
                    }
                ]

                var maomingdata = [{
                    name: "枣庄",
                    value: [117.32, 34.80, 0.5],
                },
                    {
                        name: "国家电网枣庄市中",
                        value: [117.55, 34.87, 1],
                    }
                ]

                var qingyuandata = [{
                    name: "滨州无棣县",
                    value: [117.61, 37.74, 0.5],
                },
                    {
                        name: "滨州沾化区",
                        value: [118.12, 37.69, 1],
                    }
                ]

                var zhanjiangdata = [{
                    name: "潍坊开发区所",
                    value: [119.41, 36.82, 0.5],
                },
                    {
                        name: "潍坊市寒亭区",
                        value: [119.20, 36.77, 1],
                    }
                ]

                var yunfudata = [{
                    name: "东营市广北所",
                    value: [118.68, 37.26, 0.5],
                },
                    {
                        name: "东营港",
                        value: [118.92, 38.08, 1],
                    }
                ]

                var zhaoqingdata = [{
                    name: "青岛市黄岛区",
                    value: [120.04, 35.87, 0.5],
                },
                    {
                        name: "青岛市黄岛区",
                        value: [120.04, 35.87, 1],
                    }
                ]

                var shaoguandata = [{
                    name: "烟台",
                    value: [121.40, 37.54, 0.5],
                },
                    {
                        name: "烟台开发区",
                        value: [121.26, 37.56, 1],
                    }, {
                        name: "烟台市福山区",
                        value: [121.28, 37.51, 1],
                    }
                ]

                var huizhoudata = [{
                    name: "威海",
                    value: [122.11, 37.51, 0.5],
                },
                    {
                        name: "威海乳山市",
                        value: [121.52, 36.92, 1],
                    }
                ]

                var shenzhendata = [{
                    name: "日照岚山",
                    value: [119.32, 35.12, 0.5],
                },
                    {
                        name: "日照城关",
                        value: [119.44, 35.44, 1],
                    }
                ]

                var heyuandata = [{
                    name: "济宁嘉祥",
                    value: [116.34, 35.41, 0.5],
                },
                    {
                        name: "济宁金乡",
                        value: [116.30, 35.08, 1],
                    }
                ]

                var opt = {
                    bgColor: '#013954', // 画布背景色
                    mapName: '山东', // 地图名
                    goDown: false, // 是否下钻
                    // 下钻回调
                    callback: function(name, option, instance) {
                        if (name == '山东') {
                            option.series[0].data = convertData(gdDatas);
                            option.series[1].data = gdDatas.map(function(dataItem) {
                                return {
                                    name: dataItem[0].name,
                                    value: gdGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                                };
                            });
                            map.setOption(option, true);
                            setTimeout(() => { // 定时后启动飞线
                                map.setOption(option, true);
                        }, 500)
                        } else if (name == "济南市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=济南市"
//                            option.series[0].data = convertData1(dongguandata);
//                            option.series[1].data = dongguandata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "菏泽市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=菏泽市"
//                            option.series[0].data = convertData1(foshandata);
//                            option.series[1].data = foshandata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "德州市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=德州市"
//                            option.series[0].data = convertData1(guangzhoudata);
//                            option.series[1].data = guangzhoudata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "聊城市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=聊城市"
//                            option.series[0].data = convertData1(zhongshandata);
//                            option.series[1].data = zhongshandata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "泰安市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=泰安市"
//                            option.series[0].data = convertData1(zhuhaidata);
//                            option.series[1].data = zhuhaidata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "临沂市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=临沂市"
//                            option.series[0].data = convertData1(jiangmendata);
//                            option.series[1].data = jiangmendata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "淄博市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=淄博市"
//                            option.series[0].data = convertData1(yangjiangdata);
//                            option.series[1].data = yangjiangdata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "枣庄市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=枣庄市"
//                            option.series[0].data = convertData1(maomingdata);
//                            option.series[1].data = maomingdata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "滨州市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=滨州市"
//                            option.series[0].data = convertData1(qingyuandata);
//                            option.series[1].data = qingyuandata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "潍坊市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=潍坊市"
//                            option.series[0].data = convertData1(zhanjiangdata);
//                            option.series[1].data = zhanjiangdata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "东营市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=东营市"
//                            option.series[0].data = convertData1(yunfudata);
//                            option.series[1].data = yunfudata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "青岛市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=青岛市"
//                            option.series[0].data = convertData1(zhaoqingdata);
//                            option.series[1].data = zhaoqingdata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "烟台市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=烟台市"
//                            option.series[0].data = convertData1(shaoguandata);
//                            option.series[1].data = shaoguandata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "威海市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=威海市"
//                            option.series[0].data = convertData1(huizhoudata);
//                            option.series[1].data = huizhoudata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "日照市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=日照市"
//                            option.series[0].data = convertData1(shenzhendata);
//                            option.series[1].data = shenzhendata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        } else if (name == "济宁市") {
                            window.location.href = Feng.ctxPath + "/score?cityName=济宁市"
//                            option.series[0].data = convertData1(heyuandata);
//                            option.series[1].data = heyuandata;
//                            map.setOption(option, true); // 赋值后初始化
//                            setTimeout(() => { // 定时后启动飞线
//                                map.setOption(option, true);
//                        }, 500)
                        }
                    },
                    // 数据展示
                    data: []
                };


                var levelColorMap = { // level颜色
                    '1': '#00eaff',
                    '2': '#fc9700',
                    '3': '#ffde00',
                    '4': '#f44336'
                };

                var defaultOpt = {
                    mapName: 'china', // 地图展示
                    goDown: false, // 是否下钻
                    bgColor: '#013954', // 画布背景色
                    activeArea: [], // 区域高亮,同echarts配置项
                    data: [],
                    // 下钻回调(点击的地图名、实例对象option、实例对象)
                    callback: function(name, option, instance) {}
                };
                if (opt) {
                    opt1 = $.extend(defaultOpt, opt);
                }

                // 层级索引
                var name = [opt1.mapName];
                var idx = 0;
                var pos = { //层级位置
                    leftPlus: 55,
                    leftCur: 50,
                    left: 10,
                    top: 10
                };

                var line = [ //箭头
                    [0, 0],
                    [8, 11],
                    [0, 22]
                ];

                // style样式
                var style = {
                    font: '18px "Microsoft YaHei", sans-serif',
                    textColor: '#eee',
                    lineColor: 'rgba(147, 235, 248, .8)'
                };


                var handleEvents = {
                    /**
                     * i 实例对象
                     * o option
                     * n 地图名
                     **/
                    resetOption: function(i, o, n) {
                        var breadcrumb = this.createBreadcrumb(n);

                        var j = name.indexOf(n);
                        var l = o.graphic.length;
                        if (j < 0) {
                            o.graphic.push(breadcrumb);
                            o.graphic[0].children[0].shape.x2 = 195;
                            o.graphic[0].children[1].shape.x2 = 195;
                            if (o.graphic.length > 2) {
                                for (var x = 0; x < opt1.data.length; x++) {
                                    if (n === opt1.data[x].name + '市') {
                                        o.series[0].data = handleEvents.initSeriesData(opt1.data[x].data);
                                        break;
                                    } else o.series[0].data = [];
                                }
                            }
                            name.push(n);
                            idx++;
                        } else {
                            o.graphic.splice(j + 2, l);
                            if (o.graphic.length <= 2) {
                                o.graphic[0].children[0].shape.x2 = 85;
                                o.graphic[0].children[1].shape.x2 = 85;
                                o.series[0].data = handleEvents.initSeriesData(gdDatas);
                            }
                            name.splice(j + 1, l);
                            idx = j;
                            pos.leftCur -= pos.leftPlus * (l - j - 1);
                        }

                        o.geo.map = n;
                        o.geo.zoom = 1;
                        i.clear();
                        i.setOption(o);
                        this.zoomAnimation();
                        opt1.callback(n, o, i);
                    },

                    /**
                     * name 地图名
                     **/
                    createBreadcrumb: function(name) {
                        var cityToPinyin = {
                            "济南市": "jinan",
                            "菏泽市": "heze",
                            "德州市": "dezhou",
                            "聊城市": "liaocheng",
                            "泰安市": "taian",
                            "临沂市": "linyi",
                            "淄博市": "zibo",
                            "枣庄市": "zaozhuang",
                            "滨州市": "binzhou",
                            "潍坊市": "weifang",
                            "东营市": "dongying",
                            "青岛市": "qingdao",
                            "烟台市": "yantai",
                            "威海市": "weihai",
                            "日照市": "rizhao",
                            "济宁市": "jining"
                        };
                        var breadcrumb = {
                            type: 'group',
                            id: name,
                            left: pos.leftCur + pos.leftPlus,
                            top: pos.top + 3,
                            children: [{
                                type: 'polyline',
                                left: -90,
                                top: -5,
                                shape: {
                                    points: line
                                },
                                style: {
                                    stroke: '#fff',
                                    key: name,
                                },
                                onclick: function() {
                                    var name = this.style.key;
                                    handleEvents.resetOption(map, option, name);
                                }
                            }, {
                                type: 'text',
                                left: -68,
                                top: 'middle',
                                style: {
                                    text: name,
                                    textAlign: 'center',
                                    fill: style.textColor,
                                    font: style.font
                                },
                                onclick: function() {
                                    var name = this.style.text;
                                    handleEvents.resetOption(map, option, name);
                                }
                            }, {
                                type: 'text',
                                left: -68,
                                top: 10,
                                style: {

                                    name: name,
                                    text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : '',
                                    textAlign: 'center',
                                    fill: style.textColor,
                                    font: '12px "Microsoft YaHei", sans-serif',
                                },
                                onclick: function() {
                                    var name = this.style.name;
                                    handleEvents.resetOption(map, option, name);
                                }
                            }]
                        }

                        pos.leftCur += pos.leftPlus;

                        return breadcrumb;
                    },

                    // 设置effectscatter
                    initSeriesData: function(data) {
                        var temp = [];
                        for (var i = 0; i < data.length; i++) {
                            var geoCoord = gdGeoCoordMap[data[i].name];
                            if (geoCoord) {
                                temp.push({
                                    name: data[i].name,
                                    value: geoCoord.concat(data[i].value, data[i].level)
                                });
                            }
                        }
                        return temp;
                    },

                    zoomAnimation: function() {
                        var count = null;
                        var zoom = function(per) {
                            if (!count) count = per;
                            count = count + per;
                            map.setOption({
                                geo: {
                                    zoom: count
                                }
                            });
                            if (count < 1) window.requestAnimationFrame(function() {
                                zoom(0.2);
                            });
                        };
                        window.requestAnimationFrame(function() {
                            zoom(0.2);
                        });
                    }
                };

                var convertData = function(data) {

                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var name = dataItem[0].name
                        var fromCoord = gdGeoCoordMap[dataItem[0].name];
                        //var toCoord = [113.307649675, 23.1200491021]; //被攻击点坐标
                        var toCoord = [117.000923, 36.675807];
                        if (fromCoord && toCoord) {
                            res.push([{
                                name: name,
                                coord: fromCoord,
                                value: dataItem[0].value
                            }, {
                                coord: toCoord,
                            }]);
                        }
                    }
                    return res;
                };

                var convertData1 = function(data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var name = dataItem.name
                        var fromCoord = data[0].value.slice(0, 2)
                        var toCoord = dataItem.value.slice(0, 2)
                        if (fromCoord && toCoord) {
                            res.push([{
                                name: name,
                                coord: fromCoord,
                                value: dataItem.value[2],
                            }, {
                                coord: toCoord,
                            }]);
                        }
                    }
                    return res;
                };

                var series = [];
                [
                    ['济南市', gdDatas]
                ].forEach(function(item, i) {
                    series.push({
                            type: 'lines',
                            zlevel: 1,
                            effect: {
                                show: true,
                                period: 3, //箭头指向速度，值越小速度越快
                                trailLength: 0.7, //特效尾迹长度[0,1]值越大，尾迹越长重
                                color: '#fff', //箭头图标
                                symbolSize: 3, //图标大小
                            },
                            lineStyle: {
                                normal: {
                                    width: 0.1, //尾迹线条宽度
                                    opacity: 0.2, //尾迹线条透明度
                                    curveness: 0.3 //尾迹线条曲直度
                                }
                            },
                            data: convertData(item[1])
                        }, {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            rippleEffect: { //涟漪特效
                                period: 4, //动画时间，值越小速度越快
                                brushType: 'stroke', //波纹绘制方式 stroke, fill
                                scale: 4 //波纹圆环最大限制，值越大波纹越大
                            },
                            label: {
                                normal: {
                                    show: false,
                                    position: 'right', //显示位置
                                    offset: [5, 0], //偏移设置
                                    formatter: function(params) { //圆环显示文字
                                        return params.data.name;
                                    },
                                    fontSize: 19
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            symbol: 'circle',
                            symbolSize: function(val) {
                                return 10 + val[2] * 0; //圆环大小
                            },
                            itemStyle: {
                                normal: {
                                    show: false,
                                    color: '#f00'
                                }
                            },
                            data: item[1].map(function(dataItem) {
                                return {
                                    name: dataItem[0].name,
                                    value: gdGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                                };
                            }),
                        },
                        //被攻击点
                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            rippleEffect: {
                                period: 4,
                                brushType: 'stroke',
                                scale: 4
                            },
                            label: {
                                normal: {
                                    show: false,
                                    position: 'right',
                                    //offset:[5, 0],
                                    color: '#0f0',
                                    formatter: '{b}',
                                    textStyle: {
                                        color: "#0f0"
                                    }
                                },
                                emphasis: {
                                    show: false,
                                    color: "#f60"
                                }
                            },
                            // symbol: 'pin',
                            // symbolSize: 50,
                            // data: [{
                            //     name: item[0],
                            //     value: gdGeoCoordMap[item[0]].concat([10]),
                            // }],
                        }
                    );
                });


                var option = {
                    "tooltip": {
                        trigger: 'item',
                        backgroundColor: 'transparent',
                        formatter: function(item) {
                            if (item.componentSubType === 'lines') {
                                var tipHtml1 = '';
                                tipHtml1 = '<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +
                                    '<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' + item.data.name + '</div>' +
                                    '<div style="text-align:center;color:#494949;padding:8px 6px">' +
                                    '<span style="font-size:18px;font-weight:bold;">' + '已完成任务：' + item.data.value + ' ' + '</span>' +
                                    '</div>' + '</div>';
                                return tipHtml1;
                            } else if (item.componentSubType === 'effectScatter') {
                                var tipHtml2 = '';
                                tipHtml2 = '<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +
                                    '<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' + item.data.name + '</div>' +
                                    '<div style="text-align:center;color:#494949;padding:8px 6px">' +
                                    '<span style="font-size:18px;font-weight:bold;">' + '已完成任务：' + item.data.value[2] + ' ' + '</span>' +
                                    '</div>' + '</div>';
                                return tipHtml2;
                            } else if (item.componentSubType === 'scatter') {
                                var tipHtml3 = '';
                                tipHtml3 = '<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +
                                    '<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' + item.data.name + '</div>' +
                                    '<div style="text-align:center;color:#494949;padding:8px 6px">' +
                                    '<span style="font-size:18px;font-weight:bold;">' + '已完成任务：' + item.data.value[2] + ' ' + '</span>' +
                                    '</div>' + '</div>';
                                return tipHtml3;
                            }
                        }
                    },
                    backgroundColor: "transparent",
                    "graphic": [{
                        type: 'group',
                        left: pos.left,
                        top: pos.top - 4,
                        children: [{
                            type: 'line',
                            left: 0,
                            top: -20,
                            shape: {
                                x1: 0,
                                y1: 0,
                                x2: 85,
                                y2: 0
                            },
                            style: {
                                stroke: style.lineColor,
                            }
                        }, {
                            type: 'line',
                            left: 0,
                            top: 20,
                            shape: {
                                x1: 0,
                                y1: 0,
                                x2: 85,
                                y2: 0
                            },
                            style: {
                                stroke: style.lineColor,
                            }
                        }]
                    }, {
                        id: name[idx],
                        type: 'group',
                        left: pos.left + 2,
                        top: pos.top,
                        children: [{
                            type: 'polyline',
                            left: 90,
                            top: -12,
                            shape: {
                                points: line
                            },
                            style: {
                                stroke: 'transparent',
                                key: name[0]
                            },
                            onclick: function() {
                                var name = this.style.key;
                                handleEvents.resetOption(map, option, name);
                            }
                        }, {
                            type: 'text',
                            left: 0,
                            top: 'middle',
                            style: {
                                text: '山东省',
                                textAlign: 'center',
                                fill: style.textColor,
                                font: style.font
                            },
                            onclick: function() {
                                handleEvents.resetOption(map, option, '山东');
                            }
                        }, {
                            type: 'text',
                            left: 0,
                            top: 10,
                            style: {
                                text: 'SHANDONG',
                                textAlign: 'center',
                                fill: style.textColor,
                                font: '12px "Microsoft YaHei", sans-serif',
                            },
                            onclick: function() {
                                handleEvents.resetOption(map, option, '山东');
                            }
                        }]
                    }],
                    visualMap: { //图例值控制
                        min: 0,
                        max: 1,
                        calculable: true,
                        show: false,
                        color: ['#00eaff', '#fc9700', '#ffde00', '#ffde00', '#f44336'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    "geo": {
                        "map": "山东",
                        "layoutCenter": ["55%", "50%"],
                        "layoutSize": "109%",
                        "label": {
                            "normal": {
                                "show": true,
                                "textStyle": {
                                    "color": '#fff'
                                }
                            },
                            "emphasis": {
                                "textStyle": {
                                    "color": '#fff'
                                }
                            }
                        },
                        "roam": true, //是否允许缩放
                        "mapLocation": {
                            "width": "110%",
                            "height": "97%"
                        },

                        "itemStyle": {
                            "normal": {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                // shadowColor: 'rgba(255, 255, 255, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            "emphasis": {
                                itemStyle: {
                                    areaColor: '#FFD181',
                                    borderColor: '#404a59',
                                    borderWidth: 1
                                }
                            }
                        }
                    },
                    series: series
                }
                map.setOption(option);
                map.on('click', function(params) {
                    var _self = this;
                    if (cityMap[params.name]) {
                        var url = cityMap[params.name];
                        $.get(url, function(response) {
                            curGeoJson = response;
                            echarts.registerMap(params.name, response);
                            handleEvents.resetOption(_self, option, params.name);
                        });
                    }
                });
            });
        }

        //区县排名
        function barCountyRank(data){
            var countyRank = echarts.init(document.getElementById('county_rank'), myEchartsTheme);
            var salvProName = [];
            var salvProValue = [];
            for(var i=0;i<data.length;i++){
                salvProName.push(data[i].name)
                salvProValue.push(data[i].value)
            }

            var salvProMax =[];//背景按最大值
            for (var i = 0; i < salvProValue.length; i++) {
                salvProMax.push(salvProValue[0])
            }
            var option = {
                backgroundColor:"transparent",
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '2%',
                    top: '2%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    formatter: function(params) {
                        return params[0].name  + ' : ' + params[0].value
                    }
                },
                xAxis: {
                    show: false,
                    type: 'value'
                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    data: salvProName
                }, {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff',
                            fontSize: '12'
                        },
                    },
                    data:salvProValue
                }],
                series: [{
                    name: '值',
                    type: 'bar',
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 30,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(68, 145, 253, .25)'
                            }, {
                                offset: 1,
                                color: 'rgba(187,222,253,0.25)'
                            }]),
                        },
                    },
                    barWidth: 20,
                    data: salvProValue
                },
                    {
                        name: '背景',
                        type: 'bar',
                        barWidth: 20,
                        barGap: '-100%',
                        data: salvProMax,
                        itemStyle: {
                            normal: {
                                color: 'rgba(24,31,68,1)',
                                barBorderRadius: 30,
                            }
                        },
                    },
                ]
            };
            countyRank.setOption(option);
        }

        //市排名
        function barCityRank(data){
            var cityRank = echarts.init(document.getElementById('city_rank'), myEchartsTheme);
            var salvProName = [];
            var salvProValue = [];
            if(data!=null && data.length>0){
                for(var i=0;i<data.length;i++){
                    salvProName.push(data[i].name)
                    salvProValue.push(data[i].value)
                }
            }

//            var salvProName =["济南","青岛","烟台","德州","威海","潍坊","滨州","聊城","东营","菏泽","临沂","泰安","日照"];
//            var salvProValue =[390,385,376,366,361,358,340,320,300,290,210,200,180];
            var salvProMax =[];//背景按最大值
            for (var i = 0; i < salvProValue.length; i++) {
                salvProMax.push(salvProValue[0])
            }
            var option = {
                backgroundColor:"transparent",
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '2%',
                    top: '2%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    formatter: function(params) {
                        return params[0].name  + ' : ' + params[0].value
                    }
                },
                xAxis: {
                    show: false,
                    type: 'value'
                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    data: salvProName
                }, {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff',
                            fontSize: '12'
                        },
                    },
                    data:salvProValue
                }],
                series: [{
                    name: '值',
                    type: 'bar',
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 30,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(68, 145, 253, .25)'
                            }, {
                                offset: 1,
                                color: 'rgba(187,222,253,0.25)'
                            }]),
                        },
                    },
                    barWidth: 20,
                    data: salvProValue
                },
                    {
                        name: '背景',
                        type: 'bar',
                        barWidth: 20,
                        barGap: '-100%',
                        data: salvProMax,
                        itemStyle: {
                            normal: {
                                color: 'rgba(24,31,68,1)',
                                barBorderRadius: 30,
                            }
                        },
                    },
                ]
            };
            cityRank.setOption(option);
        }

        //完成率、优秀率、及格率
        function barCompletion(data){
            var completion = echarts.init(document.getElementById('completion'), myEchartsTheme);
            var img = '';

            var trafficWay = [{
                name: '90%以上',
                value: 20
            },{
                name: '80%-90%',
                value: 10
            },{
                name: '70%-80%',
                value: 30
            },{
                name: '60%-70%',
                value: 40
            },{
                name: '60%以下',
                value: 40
            }];
            trafficWay = data;

            var data = [];
            var color=['#00ffff','#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
            for (var i = 0; i < trafficWay.length; i++) {
                data.push({
                    value: trafficWay[i].value,
                    name: trafficWay[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 5,
                            shadowBlur: 20,
                            borderColor:color[i],
                            shadowColor: color[i]
                        }
                    }
                }, {
                    value: 2,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    }
                });
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: [105, 109],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#ddd',
                            formatter: function(params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < trafficWay.length; i++) {
                                    total += trafficWay[i].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(0);
                                if(params.name !== '') {
                                    return '' + params.name +'（' + params.value + '个)' + '\n' + '\n' + '占比：' + percent + '%';
                                }else {
                                    return '';
                                }
                            },
                        },
                        labelLine: {
                            length:30,
                            length2:100,
                            show: true,
                            color:'#00ffff'
                        }
                    }
                },
                data: data
            }];
            var option = {
                backgroundColor: 'transparent',
                color : color,
                title: {
                    text: '县(市区)完成率',
                    top: '48%',
                    textAlign: "center",
                    left: "49%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 22,
                        fontWeight: '400'
                    }
                },
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            image: img,
                            width: 178,
                            height: 178
                        },
                        left: 'center',
                        top:  'center',
                        position: [100, 100]
                    }]
                },
                tooltip: {
                    show: false
                },

                toolbox: {
                    show: false
                },
                series: seriesOption
            }
            completion.setOption(option);
        }

    });
</script>
</body>

</html>